<script setup lang="ts">
import type { SegmentedProps } from './index'

const props = withDefaults(
  defineProps<SegmentedProps>(),
  {
    options: () => [],
    disabled: false,
    validateEvent: true,
    block: false,
    direction: 'horizontal',
    iconSize: 16,
    fontWeight: 500,
  },
)
const emits = defineEmits<{
  (e: 'change', value: string): void
}>()
const value = defineModel<any>()
</script>

<template>
  <div>
    <el-segmented
      v-model="value"
      v-bind="{
        ...props,
        options: props.options as any[],
      }"
      @change="(val) => {
        emits('change', val)
      }"
    >
      <template #default="{ item }: { item: any }">
        <div
          un-flex="~ justify-center items-center"
          un-gap="1"
        >
          <el-icon
            v-if="item.icon && typeof item.icon === 'object'"
            :size="props.iconSize"
          >
            <component :is="item.icon" />
          </el-icon>
          <el-icon
            v-else-if="item.icon && typeof item.icon === 'string'"
            :size="props.iconSize"
          >
            <sy-icon :icon="item.icon" />
          </el-icon>
          <span
            v-if="item.label"
            :style="{
              fontWeight: props.fontWeight,
            }"
          > {{ item.label }} </span>
        </div>
      </template>
    </el-segmented>
  </div>
</template>

<style scoped>

</style>
